<!-- 绑定微信确认弹窗 -->
<template>
	<view>
		<u-popup ref="popup" 
			v-model="show" 
			mode="center" 
			border-radius="14" 
			:mask-close-able="false" 
		>
			<view class="popup-wrap">
				<view class="title">授权申请</view>
				<view class="content">
					<view>请在设置页中开启位置授权</view>
				</view>
				<view class="btn" >
					<button type="default" @tap="handleTap" open-type="openSetting">前往设置</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show: false
			}
		},
		methods: {
			handleTap() {
				this.close();
			},
			open() {
				this.show = true;
			}, 
			close() {
				this.show = false;
			}
		}
	}
</script> 

<style lang="scss">
	.popup-wrap {
		width: 560rpx;
		height: 480rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 10rpx 20rpx;
		
		.title {
			font-size: 38rpx;
			font-weight: 800;
		}
		
		.content {
			font-size: 36rpx;
			line-height: 1.8;
			&>view {
				position: relative;
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: -30rpx;
					transform: translateY(-50%);
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #00cc00;
				}
			}
		}
		
		.btn {
			width: 80%;
			>button {
				color: #FFFFFF;
				background-color: #007AFF;
			}
		}
	}
</style>
 